import { useState, useEffect } from 'react' // useSyncExternalStore

// function subscribe(callback) {
//   window.addEventListener('online', callback)
//   window.addEventListener('offline', callback)
//   return () => {
//     window.removeEventListener('online', callback)
//     window.removeEventListener('offline', callback)
//   }
// }

export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true)
  console.log('render')

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true)
    }
    function handleOffline() {
      setIsOnline(false)
    }
    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)
    return () => {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [])
  return isOnline
  //   return useSyncExternalStore(
  //     subscribe,
  //     () => navigator.onLine, // 如何在客户端获取值
  //     () => true, // 如何在服务端获取值
  //   )
}
